<template>
    <div>
        <VueDragResize
            v-if="mode === 'edit'"
            :w="item.w"
            :h="item.h"
            :x="item.x"
            :y="item.y"
            :isActive="activedItem && activedItem.name === item.name"
            :parentW="parentW"
            :parentH="parentH"
            :minw="10"
            :minh="10"
            :isDraggable="true"
            :isResizable="true"
            :parentLimitation="true"
            v-on:activated="activateEv"
            v-on:deactivated="deactivateEv"
            v-on:dragging="changePosition"
            v-on:resizing="changeSize"
        >
            <div class="filter">
                <el-tooltip slot="reference" effect="light" :content="item.name" placement="left">
                    <drop @drop="itemDrop(item)">
                        <img class="item" :src="'/api'+item.icon" @click="itemClick(item)">
                    </drop>
                </el-tooltip>
            </div>
        </VueDragResize>
        <div
            v-if="mode !== 'edit' && item.display !== false"
            :style="posStyle"
            @click="itemClick(item)"
        >
            <div class="filter">
                <el-tooltip
                    slot="reference"
                    effect="light"
                    :content="item.name"
                    placement="left"
                    style="width: 100%; height: 100%"
                >
                    <drop @drop="itemDrop(item)">
                        <img v-if="item.icon" class="item" :src="'/api'+item.icon">
                    </drop>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 固定物品
 */
import VueDragResize from 'vue-drag-resize'
import { mapState } from 'vuex'
import Vue from 'vue'

export default {
    name: 'fixed-item',
    props: ['item', 'mode', 'active', 'parentW', 'parentH'],
    components: { VueDragResize },
    data: () => ({}),
    computed: {
        activedItem() {
            return this.$store.state.course.activedItem
        },
        posStyle: function() {
            return {
                position: 'absolute',
                top: this.item.y + 'px',
                left: this.item.x + 'px',
                width: this.item.w + 'px',
                height: this.item.h + 'px'
            }
        }
    },
    methods: {
        itemDrop(item) {
            this.$emit('itemDrop', item)
        },
        itemClick(item) {
            this.$emit('itemClick', item)
        },
        activateEv(index) {},

        deactivateEv(index) {},

        changePosition(rect) {
            const { top, left } = rect
            Vue.set(this.item, 'x', left)
            Vue.set(this.item, 'y', top)
            this.$store.commit('course/updateActivedItem', this.item)
        },

        changeSize(rect) {
            const { width, height } = rect
            Vue.set(this.item, 'w', width)
            Vue.set(this.item, 'h', height)
            this.$store.commit('course/updateActivedItem', this.item)
        }
    }
}
</script>
<style lang="less">
.item {
    max-width: 100%;
    max-height: 100%;
    transition: all 0.2s ease-in-out;
    &:hover {
        transform: scale(1.03);
        /* box-shadow: 0 0 5px rgba(200, 200, 200, 0.8); */
    }
}
.filler {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
}
</style>


